<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div style="position: relative">
        <div class="filter-line b-b-d flx-row-s-c">
          <span class="item-name">订单状态</span>
          <span
            v-for="(item, index) in status"
            :key="index"
            class="select-item"
            :class="[index == statusSelect ? 'active' : 'normal']"
            style="margin-right: 20px"
            @click="statusChange(index)"
          >
            {{ item.name }}
          </span>
        </div>
        <div class="filter-line flx-row-s-c">
          <span class="item-name">创建时间</span>
          <Select @on-change="changeDateType" v-model="dateType" style="width: 150px; margin-right: 10px">
            <Option
                v-for="item in dateTypeList"
                :value="item.type"
                :key="item.type"
            >{{ item.name }}</Option
            >
          </Select>
          <DatePicker
            :editable="false"
            type="daterange"
            split-panels
            placeholder="请选择"
            style="width: 300px"
            @on-change="dateChange"
            :options="dateOption"
            :value="time"
          ></DatePicker>
          <div
            class="user-strong-button line-button-size"
            style="margin: 0 10px 0 30px"
            @click="pageChange(1)"
          >
            搜索
          </div>
          <div class="user-normal-button line-button-size" @click="reset">
            重置
          </div>
        </div>
      </div>
    </div>

    <div class="user-main-box pub-m-t-20">
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="filter-line search-result-line flx-row-bw-c">
          <span class="f-14 c-g"
            >搜索结果共<span class="c-black">{{
              total != null ? ` ${total} ` : ""
            }}</span
            >条</span
          >
        </div>
        <table class="table-area">
          <thead>
            <tr>
              <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
              <th><div class="line-style">订单号</div></th>
              <th><div class="line-style">产品名称</div></th>
              <th><div class="line-style">创建时间</div></th>
              <th><div class="line-style">订单金额</div></th>
              <th><div class="line-style">状态</div></th>
              <th><div class="line-style">操作</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f">{{
                    (page - 1) * pageSize + index + 1
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.outTradeNo }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="c-o f-ell-sin">{{
                    item.goodsNames.join("，")
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.createdTime }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="c-o f-ell-sin">{{ item.amount }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">
                    {{
                      item.tradeState == 0
                        ? "未支付"
                        : item.tradeState == 1
                        ? "已支付"
                        : item.tradeState == 2
                        ? "已取消"
                        : "已过期"
                    }}
                  </span>
                </div>
              </td>
              <td>
                <div class="line-style normal-f">
                  <template v-if="item.tradeState == 0">
                    <div
                      class="form-font-button"
                      @click="toPay(item.outTradeNo)"
                    >
                      付款
                    </div>
                    <div
                      class="form-font-button"
                      @click="cancelOrder(item.outTradeNo)"
                    >
                      取消
                    </div>
                  </template>
                  <div
                    class="form-font-button"
                    @click="toDetail(item.outTradeNo)"
                  >
                    详情
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-c-c">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { changelocation } from "@/utils/location";
import { getOrder, cancelOrder } from "@/api/user";
import { createDateTypeList } from "@/utils/publicData";
export default {
  name: "VipMyOrder",
  data() {
    return {
      loading: false,
      breadCrumb: [{name: "管理中心"},{ name: "域名管理" }, { name: "域名订单" }],
      tablist: [
        {
          name: "域名订单",
          to: "/user/myother",
        },
      ],
      status: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "待支付",
          value: 0,
        },
        {
          name: "已取消",
          value: 2,
        },
        {
          name: "已过期",
          value: 3,
        },
        {
          name: "交易成功",
          value: 1,
        },
      ],
      type: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "注册",
          value: 0,
        },
        {
          name: "续费",
          value: 1,
        },
        {
          name: "转移",
          value: 2,
        },
      ],

      // 表单数据
      statusSelect: 0,
      typeSelect: 0,
      time: [],
      startTime: "",
      endTime: "",
      keyword: "",

      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],
      dateType: 0,
      dateTypeList: [],
      dateOption: {
      },
    };
  },
  created() {
    this.getOrder();
    this.createDateTypeList()
  },
  methods: {
    changeDateType() {
      this.changeDateOption()
    },
    changeDateOption() {
      this.time = []
      this.startTime = null
      this.endTime = null
      this.dateOption = {
        disabledDate: date => {
          let item = this.dateTypeList.filter(item => item.type === this.dateType);
          return date && (date.valueOf() < item[0].startTime || date.valueOf() > item[0].endTime);
        }
      };
    },
    createDateTypeList() {
      this.dateTypeList = createDateTypeList(6)
      this.changeDateOption()
    },
    // 日期选择改变
    dateChange(date) {
      this.startTime = date[0];
      this.endTime = date[1];
    },
    // 订单状态改变
    statusChange(index) {
      this.statusSelect = index;
      this.pageChange(1);
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getOrder();
    },
    // 重置
    reset() {
      this.statusSelect = 0;
      this.typeSelect = 0;
      this.time = [];
      this.startTime = "";
      this.endTime = "";
      this.page = 1;
      this.dateType = 0
      this.getOrder();
    },
    // 获取列表
    async getOrder() {
      this.loading = true;
      let params = {
        tradeState: this.status[this.statusSelect].value,
        startCreatedTime: this.startTime,
        endCreatedTime: this.endTime,
        limit: this.pageSize,
        page: this.page,
        dateType: this.dateType
      };
      let res = await getOrder(params);
      if (res.code == 200) {
        if (
          this.page > 1 &&
          res.data.total <= (this.page - 1) * this.pageSize
        ) {
          this.page =
            res.data.total == 0 ? 1 : Math.ceil(res.data.total / this.pageSize);
          this.getOrder();
          return;
        }
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 跳转详情页
    toDetail(outTradeNo) {
      this.$router.push({
        name: "orderdetail",
        query: {
          no: outTradeNo,
        },
      });
    },
    // 取消订单
    cancelOrder(id) {
      this.$Modal.confirm({
        title: "取消确认",
        content: "<p>确定要取消此订单吗？</p>",
        onOk: async () => {
          let params = {
            orderNo: id,
          };
          const res = await cancelOrder(params);
          const { code, result } = res;
          if (code === 200 && result) {
            this.$Message.success("取消成功！");
            this.getOrder();
          }
        },
      });
    },
    // 跳转到付款
    toPay(outTradeNo) {
      let url = changelocation("/pro/" + outTradeNo);
      window.open(url);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
